import React from 'react';
import { Flex, Layout } from 'antd';
import Music from './Music';
const { Header, Footer, Sider, Content } = Layout;
const headerStyle = {
    textAlign: 'center',
    color: '#fff',
    height: 64,
    paddingInline: 48,
    lineHeight: '64px',
    backgroundColor: '#4096ff',
};
const contentStyle = {
    textAlign: 'center',
    minHeight: 120,
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#0958d9',
};
const siderStyle = {
    textAlign: 'center',
    lineHeight: '120px',
    color: '#fff',
    backgroundColor: '#1677ff',
};
const footerStyle = {
    textAlign: 'center',
    color: '#fff',
    backgroundColor: '#4096ff',
};
const layoutStyle = {
    borderRadius: 8,
    overflow: 'hidden',
};
const MyLayout = () => (
    <Layout style={layoutStyle}>
        <Header style={headerStyle}>河北软件职业技术学院-软件工程系</Header>
        <Layout>
            <Sider width="25%" style={siderStyle}>
                <ul>
                    <li>菜单1</li>
                    <li>菜单2</li>
                    <li>菜单3</li>
                </ul>
            </Sider>
            <Content style={contentStyle}>
                <Music />
            </Content>
        </Layout>
        <Footer style={footerStyle}>版权时效 2025年</Footer>
    </Layout>
);
export default MyLayout;